<template>
	<view>
		<!-- #ifndef MP -->
		<uni-status-bar></uni-status-bar>
		<view class="flex align-center px-3" style="height: 44px;">
			<view class="iconfont iconfanhui font-lg animated fast" hover-class="pulse text-main" @click="back"></view>
		</view>
		<!-- #endif -->
		<view class="flex align-center justify-center" style="padding-top: 100rpx;padding-bottom: 80rpx;">
			<text class="font-weight-bold" style="font-size: 45rpx;">欢迎回来</text>
		</view>
		<view class="px-4">
			<view class="flex align-center mb-5">
				<input type="text" v-model="form.username"  class="uni-input rounded bg-input" placeholder="手机号 / 用户名 / 邮箱" placeholder-class="text-placeholder"/>
			</view>
			<view class="flex align-center mb-5">
				<input type="text" v-model="form.password" class="uni-input rounded bg-input" placeholder="请输入密码" placeholder-class="text-placeholder"/>
			</view>
			<view v-if="type==='reg'" class="flex align-center mb-5">
				<input type="text" v-model="form.repassword" class="uni-input rounded bg-input" placeholder="请确认密码" placeholder-class="text-placeholder"/>
			</view>
		</view>
		<view class="py-2 px-4">
			<view @click="submit" class="bg-main text-white py-2 flex align-center justify-center font-md animated fast" hover-class="bg-main-hover pulse" style="border-radius: 50rpx;border: 0;">{{type==='login'?'登 录':'注 册'}}</view>
		</view>
		<view class="flex align-center justify-center pt-2">
			<view @click="changeType" class="mx-2 text-muted">{{type==='login'?'去注册':'去登录'}}</view>
		</view>
		<view class="flex align-center justify-center pt-5">
			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
			<view class="mx-2 text-muted">社交账号登录</view>
			<view style="height: 1rpx;background-color: #dddddd;width: 100rpx;"></view>
		</view>
		
		<view class="flex align-center px-5 py-4">
			<view class="flex-1 flex align-center justify-center">
				<view class="iconfont iconweixin font-lg text-muted bg-light flex align-center justify-center rounded-circle" style="width: 100rpx;height: 100rpx;"></view>
			</view>
			<view class="flex-1 flex align-center justify-center">
				<view class="iconfont iconQQ font-lg text-muted bg-light flex align-center justify-center rounded-circle" style="width: 100rpx;height: 100rpx;"></view>
			</view>
			<view class="flex-1 flex align-center justify-center">
				<view class="iconfont iconxinlangweibo font-lg text-muted bg-light flex align-center justify-center rounded-circle" style="width: 100rpx;height: 100rpx;"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
	export default {
		components: {
			uniStatusBar
		},
		data() {
			return {
				type:'login',
				form:{
					username:'',
					password:'',
					repassword:''
				}
			}
		},
		methods: {
			changeType(){
				this.type=this.type==='login'?'reg':'login'
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			submit(){
				let msg=this.type==='login'?'登录成功':'注册成功'
				uni.showLoading({
					title:msg+'中'
				})
				this.$H.post('/'+this.type,this.form).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title: msg,
						icon: 'none'
					});
					if(this.type==='login'){
						
						this.$store.dispatch('login',res).then(result=>{
							uni.switchTab({
								url:'../index/index'
							})
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});
							uni.navigateBack({
								delta:1
							})
						})
					}else{
						this.form={
							username:'',
							password:'',
							repassword:''
						}
						this.type='login'
					}
				})
			}
		}
	}
</script>

<style>

</style>
